$theme_name: 'hc-dark';

// NOTIFICATION & ALERT
$red: #ff5050;
$light-red: #ff3a3a;
$lighter-red: #ff5050;

$orange: #ff7800;

$dark-yellow: #ffa20d;
$yellow: #a78820;
$light-yellow: #2f280a;
$lighter-yellow: #222;

$green: #23d545;
$light-green: #23d545;
$lighter-green: #44e763;

$blue: white;

$white: #000 !important;

// MAIN
$main-nav-bg-color: #000;
$main-subnav-bg-color: #e0e0e0;
$main-subnav-bg-selected-color: #000;
$main-color: #fff;
$font-color: #fff;
$font-selected-color: #fff;
$font-alt-color: #cacaca;
$body-bg-color: #111;
$overlay-bg-color: #222;


// UI
$ui-bg-color: #000;
$ui-bg-selected-color: #ddd;
$ui-hover-color: #222;
$ui-border-color: #444;
$ui-placeholder-background-color: lighten($ui-hover-color, 10%);
$ui-highlighted-parent-background-color: lighten($ui-hover-color, 20%);
$ui-sortable-helper-background-color: $ui-bg-color;
$ui-sortable-helper-border-color: $ui-border-color;

$action-hover-color: #454545;
$action-border-color: #666;
$action-shadow-color: rgba(#000, 0.5);

$table-border-color: #333;

$ui-tab-bg-selected-color: #fff;


// FORMS
$form-font-color: #e1e3ed;
$form-bg-color: #383838;
$form-border-color: #666;
$form-border-focus-color: #bbb;

$form-disabled-font-color: #7d7d7d;
$form-disabled-bg-color: #000;
$form-disabled-border-color: #5a5a5a;

$scrollbar-track-color: #1f1f1f;
$scrollbar-thumb-color: #999;
$scrollbar-thumb-color-darken: 30%;

$input-placeholder-color: #bbb;

// BUTTONS
$btn-font-color: #333;
$btn-bg-color: #e0e0e0;
$btn-border-color: #333;

$btn-alt-font-color: #fff;
$btn-alt-bg-color: transparent;
$btn-alt-border-color: $btn-border-color;

$btn-form-font-color: #f2f2f2;
$btn-form-bg-color: $form-bg-color;
$btn-form-hover-color: #414141;
$btn-form-border-color: $form-border-color;

$btn-disabled-font-color: #7d7d7d;
$btn-disabled-bg-color: transparent;
$btn-disabled-border-color: #7d7d7d;

$btn-back-map-background-color: rgba(0, 0, 0, 0.8);
$btn-back-text-color: white;
$btn-back-background-hover: #8f8f8f;

// LINKS
$link-color: #f8f8f8;
$link-hover-color: #fff;
$link-active-color: #f8f8f8;
$link-visited-color: #f8f8f8;

$link-alt-underline-color: #818181;

$link-main-nav-color: rgba(#fff, 0.8);
$link-main-nav-hover-color: rgba(#fff, 1);
$link-main-nav-active-color: rgba(#fff, 1);
$link-main-nav-visited-color: rgba(#fff, 0.8);

$link-main-subnav-color: rgba(#000, 0.8);
$link-main-subnav-hover-color: rgba(#000, 1);
$link-main-subnav-active-color: rgba(#000, 1);
$link-main-subnav-visited-color: rgba(#000, 0.8);

// ANALOG CLOCK
$clock-face-color: #000;
$clock-hand-color: #fff;
$clock-hand-sec-color: #999;
$clock-lines-color: #888;

// STATUSES
$problem-unack-fg-color: #ff3333;
$problem-ack-fg-color: #ff3333;
$ok-unack-fg-color: #00ff00;
$ok-ack-fg-color: #00ff00;

.status-na-bg, .status-info-bg, .status-warning-bg, .status-average-bg, .status-high-bg, .status-disaster-bg {
	border-color: rgba($ui-bg-color, .2) !important;
	background-color: $ui-bg-selected-color !important;
	color: $ui-bg-color !important;
}

// Important! @import string should come after variables
@import 'screen.scss';

// ICONS
$var-icons: (
	maint: url(../img/icon-sprite.svg) no-repeat -357px -802px,
	depend-up: url(../img/icon-sprite.svg) no-repeat -361px -730px,
	depend-down: url(../img/icon-sprite.svg) no-repeat -361px -766px,
	ackn: url(../img/icon-sprite.svg) no-repeat -357px -693px
);

@each $var-icons, $bgimage in $var-icons {
	.icon-#{$var-icons} {
		margin: 0 18px 0 0;
		&::before {
			background: $bgimage;
			@extend %var-icons;
		}
	}
}

$form-icon-btn: (
	help: url(../img/icon-sprite.svg) no-repeat -318px -726px,
	cal: url(../img/icon-sprite.svg) no-repeat -354px -834px,
	wzrd-action: url(../img/icon-sprite.svg) no-repeat -317px -617px
);

@each $form-icon-btn, $bgimage in $form-icon-btn {
	.icon-#{$form-icon-btn} {
		background: $transparent $bgimage;
		@extend %form-icon-btn;

		@if $form-icon-btn == 'wzrd-action' {
			margin-top: -16px;
		}
	}
}

$icon-btn: (
	conf: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -187px,
	kiosk: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -79px -223px,
	max: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -223px,
	min: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -259px,
	add-fav: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -295px,
	remove-fav: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -329px,
	action: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -367px,
	info: $btn-bg-color url(../img/icon-sprite.svg) no-repeat -43px -403px
);

@each $icon-btn, $bgimage in $icon-btn {
	.btn-#{$icon-btn} {
		background: $bgimage;
		@extend %button-icon-size;
	}
}

$icon-widget-btn: (
	widget-action: url(../img/icon-sprite.svg) no-repeat -318px -618px,
	widget-collapse: url(../img/icon-sprite.svg) no-repeat -318px -654px,
	widget-expand: url(../img/icon-sprite.svg) no-repeat -318px -690px,
	widget-edit: url(../img/icon-sprite.svg) no-repeat -354px -619px,
	widget-delete: url(../img/icon-sprite.svg) no-repeat -354px -582px,
	alarm-on: url(../img/icon-sprite.svg) no-repeat -318px -546px,
	alarm-off: url(../img/icon-sprite.svg) no-repeat -318px -582px,
	sound-on: url(../img/icon-sprite.svg) no-repeat -318px -474px,
	sound-off: url(../img/icon-sprite.svg) no-repeat -318px -510px,
	info-clock: url(../img/icon-sprite.svg) no-repeat -399px -762px
);

@each $icon-widget-btn, $bgimage in $icon-widget-btn {
	.btn-#{$icon-widget-btn} {
		background: $bgimage;
		@extend %btn-widget;
	}
}

.top-nav-help {
	background: url(../img/icon-sprite.svg) no-repeat -84px -32px !important;
}
.top-nav-profile {
	background: url(../img/icon-sprite.svg) no-repeat -84px -104px !important;
}
.top-nav-signout {
	background: url(../img/icon-sprite.svg) no-repeat -84px -140px !important;
}
.top-nav-zbbshare {
	background: url(../img/icon-sprite.svg) no-repeat -87px -68px !important;
}
.top-nav-support {
	background: url(../img/icon-sprite.svg) no-repeat -245px -32px !important;
}
.btn-search {
	background: url(../img/icon-sprite.svg) no-repeat -83px -7px !important;
}
.btn-dashbrd-conf {
	background: url(../img/icon-sprite.svg) no-repeat -354px -619px !important;
}

.list-table {

	.subfilter-enabled {
		background-color: $ui-bg-color;
		box-shadow: 0 0 0 1px $link-hover-color;
	}

	thead th {
		border-color: lighten($table-border-color, 3%);
	}
}

.subfilter-enabled {

	.link-action {
		color: $link-hover-color;

		&:focus {
			color: $link-hover-color;
			border-bottom: 3px solid $link-hover-color;
		}

		&:hover {
			color: $link-hover-color;
			border-bottom: 1px solid $link-hover-color;
		}
	}
}

.timeline-axis {
	border-right-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;

	&::before {
		background-color: darken(desaturate($btn-bg-color, 4%), 18%) !important;
	}
}

.action-menu {
	background-color: $form-bg-color;
	border: 1px solid $form-border-color;

	.action-menu-item-disabled {
		color: $form-disabled-font-color;
	}

	.action-menu-item {
		&:hover,
		&:focus,
		&:active,
		&.highlighted {
			background-color: black;
			color: white;

			.arrow-right {
				border-left-color: white;
			}
		}

		&.selected {

			&::before {
				background: url(../img/icon-sprite.svg) no-repeat -317px -835px;
			}
		}
	}
}

ul.top-nav-icons {
	input {
		border: 1px solid $form-border-color !important;
		background-color: $form-bg-color !important;

		&:focus {
			border: 1px solid $main-subnav-bg-color !important;
		}
	}
}

.filter-breadcrumb {
	a {
		&:focus {
			margin-bottom: -1px;
		}
	}
}

.add-child-btn {
	background: url(../img/icon-sprite.svg) no-repeat -359px -551px !important;
}
.edit-item-btn {
	background: url(../img/icon-sprite.svg) no-repeat -359px -478px !important;
}
.import-items-btn {
	background: url(../img/icon-sprite.svg) no-repeat -359px -515px !important;
}
.drag-icon {
	background: url(../img/icon-sprite.svg) no-repeat -318px -762px !important;
}

// COLORS AND GENERAL

button {
	&:focus {
		@include box-shadow(0 0 0 2px rgba($blue, 1));
		background-color: darken($btn-bg-color, 10%)
	}
}

.btn-alt {
	&:focus {
		@include box-shadow(0 0 0 2px rgba($blue, 1));
	}
}

.radio-segmented {

	.average-bg,
	.disaster-bg,
	.high-bg,
	.info-bg,
	.na-bg,
	.warning-bg {

		&:before,
		&:after {
			display: none;
		}
	}

	li {

		input[type="radio"] {

			&:checked:not([disabled]) + label {
				color: $white;
			}

			&:checked + label {
				background-color: $ui-bg-selected-color !important;
			}

			&:focus + label {
				@include box-shadow(0 0 0 2px rgba($blue, 1) !important);
				background-color: darken($btn-bg-color, 10%) !important;
				color: $white;
			}

			&:checked[disabled] + label {
				background-color: #595959 !important;
			}
		}
	}
}

a {
	&:link {
		border-bottom: 1px solid rgba($link-hover-color, 0.5);
	}
	&:visited {
		border-bottom: 1px solid $link-hover-color;
	}
	&:hover {
		border-bottom: 1px solid $link-hover-color;
	}
	&:focus {
		border-bottom: 3px solid $link-hover-color;
	}
}

a.link-action {
	border-bottom: 1px dotted;
		&:hover {
			border-bottom: 1px solid $link-hover-color;
	}
}

.link-action {
	&:hover {
		color: $link-hover-color;
		border-bottom: 1px solid $link-hover-color;
	}

	&:active {
		color: $link-hover-color;
		border-bottom: 1px dotted $link-hover-color;
	}
	&:focus {
		color: $link-hover-color;
		border-bottom: 3px solid $link-hover-color;
	}
}

.link-alt {
	&:link {
		border-bottom: 1px solid $link-alt-underline-color;
	}

	&:visited {
		border-bottom: 1px solid $link-alt-underline-color;
	}

	&:hover {
		color: $link-hover-color;
		border-bottom: 1px solid $link-hover-color;
	}

	&:focus {
		color: $link-hover-color;
		border-bottom: 3px solid $link-hover-color;
	}

	&:active {
		color: $link-active-color;
		border-bottom: 1px solid $link-active-color;
	}
}

.top-nav {
	a {
		&:focus {
			color: $link-main-nav-active-color;
			background-color: lighten($ui-hover-color, 10%) !important;
			@include box-shadow(0 0 0 2px $blue);
			@include transition(box-shadow .2s ease-out);
		}
	}
}

.top-subnav a {
	&.selected {
		font-weight: bold;
		border-bottom: 4px solid #000 !important;
	}
	&:focus {
		border-bottom: 4px solid rgba($ui-hover-color, .7) !important;
		outline: none;
	}
}

ul.top-nav-icons {
	a {
		&:focus {
			background-color: lighten($ui-hover-color, 10%) !important;
			@include opacity(1);
			@include box-shadow(0 0 0 2px $blue);
			@include transition(box-shadow .2s ease-out);
		}
	}
}

.server-name {
	color: $link-main-subnav-color;
}

.status-dark-grey {
	border: none !important;
	background-color: #666 !important;
}

.btn-link {
	font-weight: bold !important;
	color: #fff !important;

	&:focus {
		margin-bottom: -3px !important;
		border-bottom: 3px solid $link-hover-color !important;
	}
}

.table-paging {
	a {
		&:focus {
			background-color: $link-hover-color;
				.arrow-right {
					border-left-color: #000;
				}
				.arrow-left {
					border-right-color: #000;
				}
		}
	}
}

.paging-selected {
	color: #000 !important;
	&:focus {
		background-color: $link-hover-color !important;
	}
}

.filter-trigger {
	.arrow-down {
		border-top-color: #000 !important;
	}
}

.subfilter-enabled {
	background-color: #000;
}


.subfilter-disable-btn {
	background-color: $ui-bg-color !important;

	&:active {
		background-color: $ui-bg-color !important;
	}
}


.tag {
	color: $ui-bg-color;
}

.disabled {
	@include opacity(0.6);
}

.multiselect {
	.multiselect-list {
		padding-left: 2px;
		padding-bottom: 2px;

		li {

			&.selected {

				.subfilter-enabled {
					background-color: $ui-hover-color !important;
					@include box-shadow(0 0 0 1px rgba($blue, 1));
				}

				.subfilter-disable-btn {
					background-color: $ui-hover-color !important;
					@include box-shadow(0 0 0 1px rgba($blue, 1));
				}
			}
		}
	}
}

.header-logo {
	&:focus {
		@include box-shadow(0 0 0 2px $blue);
		@include transition(box-shadow .2s ease-out);
	}
}

.checkbox-radio {
	&:focus + label span {
		@include box-shadow(0 0 0 1px $blue);
		@include transition(box-shadow .2s ease-out);
	}
}

%form-input-style {
	&:focus {
		@include box-shadow(0 0 0 1px $blue);
		@include transition(box-shadow .2s ease-out);
	}
}

.multiselect {
	&.active {
		@include box-shadow(0 0 0 1px $blue);
		@include transition(box-shadow .2s ease-out);
	}
	input[type="text"]{
		&:focus {
			box-shadow: none;
		}
	}
}

.progress-bar-container {
	a {
		&:hover, &:focus {
			.progress-bar-label {
				color: white !important;
			}
		}
	}
}

.multiselect-suggest {
	li {
		&.suggest-hover {
			background-color: $ui-bg-color;
		}
	}
}

.suggest-found {
	color: lighten($alt-yellow, 10%);
}

.dashbrd-widget-graph-link {

	&:focus {

		&:after {
			background: $blue;
			height: 3px;
			bottom: -3px;
		}
	}
}

// Tables

.list-table {
	&.compact-view {

		.flh-na-bg, .flh-info-bg, .flh-warning-bg, .flh-average-bg, .flh-high-bg, .flh-disaster-bg {
			&:not(.row-selected):not(:hover) {
				background: none;
			}
		}

		td.na-bg, td.normal-bg, td.info-bg, td.warning-bg, td.average-bg, td.high-bg, td.disaster-bg {
			&:before {
				min-height: 20px;
				box-shadow: inset 0 -1px 0 0 $table-border-color;
			}
		}

		td.na-bg, td.normal-bg, td.info-bg, td.warning-bg, td.average-bg, td.high-bg, td.disaster-bg {
			&:after {
				top: 1px;
				transform: scale(0.8);
			}
		}

		td {

			box-shadow: inset 0 -1px 0 0 $table-border-color;

			.icon-maint::before {
				background-position: -360px -804px;
			}

			.icon-wzrd-action {
				background: transparent url(../img/icon-sprite.svg) no-repeat -318px -624px;
			}
		}
	}
}

// Filter Checkboxes

.filter-highlight-row-cb {
	display: none;
}

// SEVERITY STATUSES

td.log-na-bg {
	padding-left: 42px !important;
	color: $font-color;
}

td.na-bg {
	padding-left: 42px !important;
	color: $font-color;
	~ td.na-bg {
		border-left: none;
	}
}

.na-bg, .log-na-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.na-bg a.link-action {
	color: $link-color;
}

.log-na-bg:before {
	color: darken($alt-blue-grey,45%) !important;
	background-color: $alt-blue-grey !important;
}

.na-bg:before, .log-na-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: #59db8f;
	min-height: 28px;
}

.na-bg:after, .log-na-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -106px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.na-bg.blink-hidden:after{
	content: none;
}

td.normal-bg {
	@extend td.na-bg;
}

.normal-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.normal-bg a.link-action {
	color: $link-color;
}

.normal-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: $alt-green;
	min-height: 28px;
}

.normal-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -76px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.normal-bg.blink-hidden:after{
	content: none;
}

td.log-info-bg {
	@extend td.log-na-bg;
}

td.info-bg {
	@extend td.na-bg;
}

.info-bg, .log-info-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.info-bg a.link-action {
	color: $link-color;
}

.log-info-bg:before {
	color: darken($alt-dark-blue,45%) !important;
	background-color: $alt-dark-blue !important;
}

.info-bg:before, .log-info-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-height: 28px;
}

.info-bg:after, .log-info-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -136px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.info-bg.blink-hidden:after{
	content: none;
}

td.average-bg {
	@extend td.na-bg;
}

.average-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.average-bg a.link-action {
	color: $link-color;
}

.average-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-height: 28px;
}

.average-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -196px -442px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.average-bg.blink-hidden:after{
	content: none;
}

td.log-warning-bg {
	@extend td.log-na-bg;
}

td.warning-bg {
	@extend td.na-bg;
}

.warning-bg, .log-warning-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.warning-bg a.link-action {
	color: $link-color;
}

.log-warning-bg:before {
	color: darken($alt-yellow,45%) !important;
	background-color: $alt-yellow !important;
}

.warning-bg:before, .log-warning-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-height: 28px;
}

.warning-bg:after, .log-warning-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -166px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.warning-bg.blink-hidden:after{
	content: none;
}

td.log-high-bg {
	@extend td.log-na-bg;
}

td.high-bg {
	@extend td.na-bg;
}

.high-bg, .log-high-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.high-bg a.link-action {
	color: $link-color;
}

.log-high-bg:before {
	color: darken($alt-dark-orange,45%) !important;
	background-color: $alt-dark-orange !important;
}

.high-bg:before, .log-high-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-height: 28px;
}

.high-bg:after, .log-high-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -226px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.high-bg.blink-hidden:after{
	content: none;
}

td.log-disaster-bg {
	@extend td.log-na-bg;
}

td.disaster-bg {
	@extend td.na-bg;
}

.disaster-bg, .log-disaster-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
}

.disaster-bg a.link-action {
	color: $link-color;
}

.log-disaster-bg:before {
	color: darken($alt-red,45%) !important;
	background-color: $alt-red !important;
}

.disaster-bg:before, .log-disaster-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-height: 28px;
}

.disaster-bg:after, .log-disaster-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -256px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

.disaster-bg.blink-hidden:after{
	content: none;
}

.notif-body {
	h4 {
		padding-bottom: 3px;
		margin-bottom: -3px;
	}

	p {
		margin: 0.25em 0 2px 0;
	}

	li {
		padding: 0 0 10px 42px;
	}
}

.notif-indic {
	width: 34px;
	height: 27px;
	position: relative;
	margin: 0 0 0 -42px;
}

.notif-indic-container {
	margin: 0 0 0 -42px;
}

td.inactive-bg {
	padding-left: 42px !important;
	color: $font-color;
}

.inactive-bg {
	background-color: rgba(0, 0, 0, 0.0) !important;
	padding-left: 42px;
}

.inactive-bg:before {
	content: "";
	width: 34px;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	min-height: 28px;
	background-color: $alt-red;
}

.inactive-bg:after {
	content: "";
	background: url(../img/icon-sprite.svg) no-repeat -256px -443px;
	width: 22px;
	height: 18px;
	top: 5px;
	left: 6px;
	position: absolute;
}

// ERROR MESSAGES
.msg-bad {
	.link-action {
		color: $light-red;

		.arrow-up {
			border-bottom-color: $light-red;
		}
		.arrow-down {
			border-top-color: $light-red;
		}
		&:hover {
		color: $link-hover-color;
		}
	}

	button {
		color: $btn-alt-font-color;
	}
}

.msg-good {
	.link-action {
		color: $light-green;

		.arrow-up {
			border-bottom-color: $light-green;
		}
		.arrow-down {
			border-top-color: $light-green;
		}
		&:hover {
		color: $link-hover-color;
		}
	}

	button {
		color: $btn-alt-font-color;
	}
}

// GRAPH AND MAP
.graph-selection {
	background-color: rgba($font-color,0.2);
	border: none;
	outline: 2px solid rgba($font-color,0.6);
}
.svg-graph-selection {
	fill: rgba($font-color,0.2);
	stroke: rgba($font-color,0.6);
	stroke-width: 2px;
}

.ui-selectable-helper {
	background-color: rgba($font-color,0.2);
	border: 2px solid rgba($font-color,0.6);
}

.map-element-selected {
	border: 3px dashed $font-color;
}

.btn-back-map-container {

	a {
		border-bottom: none;
	}

	.btn-back-map {
		.btn-back-map-icon {
			background-position: -85px -725px;
		}
	}
}

// TIME SELECTION
.ui-tabs-nav {
	.btn-time {
		&:after {
			background-position: -246px -583px;
		}
	}

	.filter-trigger {
		&:after {
			background-position: -246px -547px;
		}
	}

	.btn-time,
	.filter-trigger {
		&:hover {
			background-color: darken($btn-bg-color, 10%);
		}

		&:focus {
			@include box-shadow(0 0 0 2px rgba($blue, 1));
			background-color: darken($btn-bg-color, 10%);
		}
	}

	.ui-state-focus {
		.btn-time,
		.filter-trigger {
			@include box-shadow(0 0 0 2px rgba($blue, 1));
			background-color: darken($btn-bg-color, 10%);
		}

		&.ui-tabs-active {
			.btn-time,
			.filter-trigger {
				@include box-shadow(0 0 0 2px rgba($blue, 1));
				background-color: $ui-hover-color;
			}
		}
	}

	.ui-tabs-active {
		.btn-time {
			&:after {
				background-position: -87px -583px;
			}
		}

		.filter-trigger {
			&:after {
				background-position: -87px -547px;
			}
		}
	}
}

.btn-time-left {
	background-position: -397px -657px;

	&:hover,
	&:focus {
		background-position: -245px -658px;
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:focus {
		background-color: darken($btn-bg-color, 10%);
	}

	&:disabled {
		background-position: -397px -657px;
	}
}

.btn-time-right {
	background-position: -395px -623px;

	&:hover,
	&:focus {
		background-position: -243px -624px;
		@include btn-hover-active($btn-font-color, $btn-bg-color);
	}

	&:focus {
		background-color: darken($btn-bg-color, 10%);
	}

	&:disabled {
		background-position: -395px -623px;
	}
}

.time-quick {
	li {
		a {
			&:focus {
				@include box-shadow(0 0 0 2px rgba($blue, 1));
				@include border-radius(2px);
			}
		}
	}
}

.icon-action-command::before {
	background-position: -249px -325px;
}
.icon-action-close::before {
	background-position: -224px -325px;
}
.icon-action-msg::before {
	background-position: -299px -325px;
}
.icon-action-severity-up::before {
	background-position: -349px -325px;
}
.icon-action-severity-down::before {
	background-position: -374px -325px;
}
.icon-action-severity-changed::before {
	background-position: -399px -325px;
}
.icon-action-message::before {
	background-position: -199px -325px;
}
.icon-action-ack::before {
	background-position: -323px -325px;
}
.icon-invisible::before {
	background-position: -401px -803px,
}
.icon-problem-generated::before {
	background-position: -449px -325px;
}
.icon-problem-recovery::before {
	background-position: -424px -325px;
}
.icon-action-msgs {
	&::before {
		background-position: -474px -325px;
	}
}
.icon-actions-number-gray {
	&::before {
		background-position: -499px -325px;
	}
}
.icon-actions-number-yellow {
	&::before {
		background-position: -549px -325px;
	}
}
.icon-actions-number-red {
	&::before {
		background-position: -524px -325px;
	}
}

// OVERRIDES
.overrides-options-list {
	> li > div {
		border: 1px solid $ui-tab-bg-selected-color;
		background-color: transparent !important;

		> .subfilter-disable-btn {
			border: none !important;
			top: 0;
		}
	}
}
